<template>
    <div class="header">
        <div class="header-top">
            <div class="header-contain">
                <div class="r">
                    <span v-if="userInfo" class="iconfont icon-user"></span><span class="login-name">{{userInfo.userName}}</span>
                    <nuxt-link class="iconfont icon-questions" to="/feedback"></nuxt-link>
                </div>
            </div>
        </div>
        <div class="header-btm">
            <ul>
                <li :class="{ current : headerIndex == 0, 'li-active': isBindFB  || isBindGoogle}">
                    <nuxt-link to="/">
                        <div class="li-wrapper">
                            <span class="normal-icon icons iconfont icon-adv-all"></span>
                            <span class="words">广告汇总</span>
                        </div>
                    </nuxt-link>
                </li>
                <li :class="{ current : headerIndex == 1, 'li-active': isBindFB  || isBindGoogle}">
                    <nuxt-link to="/create" >
                        <div class="li-wrapper">
                            <span class="normal-icon icons iconfont icon-create-adv"></span>
                            <span class="words">创建广告</span>
                        </div>
                    </nuxt-link>
                </li>

                <li :class="{ current : headerIndex == 2, 'li-active': isBindFB  || isBindGoogle}" >
                    <nuxt-link to="/manager/facebook" v-if="!isBindFB && !isBindGoogle">
                        <div class="li-wrapper">
                            <span class="normal-icon icons iconfont icon-adv-manage adv-manage"></span>
                            <span class="words">广告管理</span>
                            <span class="el-dropdown-link">
                                <i class="el-icon-caret-bottom el-icon--right"></i>
                            </span>
                        </div>
                    </nuxt-link>
                    <el-dropdown v-if="isBindFB || isBindGoogle">
                        <a href="javascript:;" >
                            <div class="li-wrapper">
                                <span class="normal-icon icons iconfont icon-adv-manage adv-manage"></span>
                                <span class="words">广告管理</span>
                            </div>
                        </a>
                        <span class="el-dropdown-link">
                            <i class="el-icon-caret-bottom el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item :disabled="!isBindFB">
                                <nuxt-link to="/manager/facebook">Facebook</nuxt-link>
                            </el-dropdown-item>
                            <el-dropdown-item :disabled="!isBindGoogle">
                                <nuxt-link to="/manager/google">Google</nuxt-link>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </li>
                <li :class="{ current : headerIndex == 3, 'li-active': isBindFB  || isBindGoogle}">
                    <nuxt-link to="/statistics" v-if="!isBindFB && !isBindGoogle">
                        <div class="li-wrapper">
                            <span class="icons iconfont icon-statistical-analysis"></span>
                            <span class="words">统计分析</span>
                            <span class="el-dropdown-link">
                                <i class="el-icon-caret-bottom el-icon--right"></i>
                            </span>
                        </div>
                    </nuxt-link>
                    <el-dropdown v-if="isBindFB || isBindGoogle">
                        <a href="javascript:;" >
                            <div class="li-wrapper">
                                <span class="icons iconfont icon-statistical-analysis"></span>
                                <span class="words">统计分析</span>
                            </div>
                        </a>
                        <span class="el-dropdown-link">
                            <i class="el-icon-caret-bottom el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item :disabled="!isBindFB">
                                <nuxt-link to="/statistics">Facebook</nuxt-link>
                            </el-dropdown-item>
                            <el-dropdown-item :disabled="!isBindGoogle">
                                <nuxt-link to="/statistics/index_Google">Google</nuxt-link>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </li>
                <li :class="{ current : headerIndex == 4, 'li-active': isBindFB || isBindGoogle}">
                    <nuxt-link to="/adv-assets/assets">
                        <div class="li-wrapper">
                            <span class="icons iconfont icon-adv-assets adv-assets"></span>
                            <span class="words">广告资产</span>
                        </div>
                    </nuxt-link>
                </li>
                <li :class="{ current : headerIndex == 5}" class="li-active">
                    <nuxt-link to="/account">
                        <div class="li-wrapper">
                            <span class="icons iconfont icon-platform-account platform-account"></span>
                            <span class="words">平台账户</span>
                        </div>
                    </nuxt-link>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
   import Vue from 'vue';
   import { mapGetters} from 'vuex';
   import {Dropdown, DropdownMenu,DropdownItem} from 'element-ui';
   import {setToken , getCookie} from '../assets/js/global.js';
   Vue.use(Dropdown);
   Vue.use(DropdownMenu);
   Vue.use(DropdownItem);
    export default {
        data() {
            return {
                userInfo : {
                    userName : ''
                }
            };
        },
        computed : {
            ...mapGetters({
                'headerIndex' : 'getHeaderIndex',
                'isBindFB' : 'getBindFacebook',
                'isBindGoogle' : 'getBindGoogle'
            })
        },
        created() {
            if(process.BROWSER_BUILD){
                this.$store.dispatch('getPlatFormUserInfo').then((ret)=>{
                    if(ret.data && ret.data.data){
                        this.userInfo = ret.data.data;
                        setToken('userInfo' , JSON.stringify(this.userInfo));
                    }
                });
            }
        }
    }
</script>

<style scoped>

    .header{
        width: 100%;
        background: #333;
    }
    .header-top{
        background-color: #333;
        width: 100%;
        height: 60px;
        position: relative;
        z-index: 2;
    }
    .header-contain {
        background:url('../assets/img/header/logo.png') left 12px no-repeat;
        height: 60px;
        max-width: 1200px;
        margin: 0 auto;
        height: 60px;
        position: relative;
    }
    .header-top .r{

        line-height: 60px;
        color:#b0bec5;
        position: absolute;
        right:0;
    }
    .header-top .r .icon-message,.icon-user{
        font-size: 20px;
        position: relative;
    }
    .icon-user{
        margin-left: 20px;
       vertical-align: middle;
    }

    .icon-questions{
        font-size: 20px;
        color:#b0bec5;
        vertical-align: sub;
        padding-left: 10px;
        border-left:1px #636667 solid;
    }
    .login-name{
        color:#666;
        padding: 0 10px 0 5px;
    }

    .header-top .r .icon-message i{
        position: absolute;
        height: 16px;
        text-align: center;
        line-height: 16px;
        font-size: 7px;
        color:#fff;
        top:-10px;
        right:-10px;
        font-style: normal;
        border-radius: 50%;
        background-color: #ff3526;
    }
    .el-dropdown{
        color:#b0bec5;
        font-size: 10px;
    }

    .header-btm{
        height: 80px;
        background-color: #0686f9;
    }

    .header-btm ul{
        max-width: 1200px;
        display:flex;
        flex-direction: row;
        justify-content: space-around;
        padding:0;
        align-content: space-between;
        align-items:stretch;
        height: 82px;
        margin: 0 auto;
    }

    .header-btm ul li{
        margin: 8px;
        text-align: center;
        position: relative;
        border-radius: 5px;
        box-sizing: border-box;
        color:#fff;
    }
    .header-btm ul .li-active.current,.header-btm ul .li-active:hover{
        background-color: #fff;
    }

    .header-btm ul .li a{
        display: block;
    }
    
    .header-btm ul li a span.icons{
        font-size: 14px;
        display: block;
        color:#D5DFE4;
        height: 22px;
        line-height: 22px;
    }
    .header-btm ul li a span.words{
        font-size: 14px;
        display: block;
        color:#fff;
    }

    .header-btm ul .li-active.current a span,.header-btm ul .li-active:hover a span{
        color:#0686F9;
    }

    .header-btm ul li a .icon{
        font-size: 18px;
        display: inline-block;
        margin-bottom: 7px;
    }
    .header-btm ul li a .words{
        margin-top: 7px;
    }

    .el-icon--right{
        transform: scale(0.75);
        font-size: 9px;
        margin-top:5px;
        color:#FFB100;
    }

    .el-dropdown-link{
        position: absolute;
        right: 0px;
        top: 5px;
    }
    .header-btm ul .li-active.current .el-dropdown-link,
    .header-btm ul .li-active:hover .el-dropdown-link
    {
        display: none;
    }

    .el-select-dropdown__item,.el-dropdown-menu__item{
        text-align: left;
    }

    .el-dropdown-menu__item a{
        display: block;
        color:#666;
        font-size: 13px;
    }

    .el-dropdown-menu__item:hover,.el-dropdown-menu__item a:hover{
        background-color: ##0686F9;
    }

    .el-dropdown{
        padding-bottom: 12px;
    }

    .el-dropdown-menu{
        min-width: 90px;
        margin-top:-13px;
        background: #FFFFFF;
        border: 1px solid #EAEEF0;
        box-shadow: 0px 8px 12px 0px rgba(0,0,0,0.10);
        border-radius: 4px;
    }

    .el-dropdown-menu li:hover{
        background-color: #0686F9;
    }

    .el-dropdown-menu li:hover a{
        color:#fff;
    }

    .header-btm ul li a span.adv-manage{ font-size:16px;}
    .header-btm ul li a span.adv-assets{ font-size:12px;}
    .header-btm ul li a span.platform-account{font-size:11px;}
    .li-wrapper {
        padding: 10px 17px;
    }

</style>